<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">个人资料</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" src="/static/bg05.png" mode="widthFix"></image>
			<view class="bg_content">
				
				<view class="avatar_box" @click="up_img" >
					<image class="a01" :src="headimg"  mode="scaleToFill"></image>
					<image class="a02" src="/static/addimg01.png" mode="widthFix"></image>
				</view>
					
				<view class="details_box">
					<view class="list">
						<view class="name">用户昵称</view>
						  <input class="text" v-model="nickname" placeholder="请输入" /></input>
					</view>
					<view class="list">
						<view class="name">手机号</view>
						 <input class="text"  v-model="phone" disabled placeholder="手机号" />
					</view>
					<view class="list">
						<view class="name">邮箱</view>
						  <input class="text" v-model="email" placeholder="请输入" />
					</view>
					
				</view>
				<view class="clear_box04"></view>
				
				<view class="confirm sub" @click="to_save()">确认</view>
				
			</view>
		</view>
		
	</view>
</template>


<script>
	import {mapState} from 'vuex';
	import helper from '@/common/helper.js';
	export default {
	data() {
		return {
			scrrol:false,
			index: 0,
			genderdatas: ['男', '女'],
			gender: '',
			nickname : '',
			phone : '',
			email : '',
			headimg : '/static/tx01.png',
			img_change : 0,
		};
	},
   computed: {
     	...mapState(['hasLogin', 'userInfo']),
   },
   onPageScroll: function(Object) {
		if (Object.scrollTop > 28) {
			this.scrrol = true;
		} else if (Object.scrollTop < 28) {
			this.scrrol = false;
		}
   },
   onLoad() {
   	    if(this.hasLogin){
			  this.nickname = this.userInfo.nickname;
			  this.phone = this.userInfo.phone;
			  this.headimg = this.realUrl(this.userInfo.headimg);
			  this.email = this.userInfo.email;
		}
   },
	methods: {
		to_save(){
			try{
				if(this.nickname == ''){
					throw '请输入用户昵称';
				}
				if(!helper.check_email(this.email)){
					 this.showMsg('邮箱格式错误');
					 return false;
				}
				
			}catch(err){
				this.showMsg(err);
				return false;
			}
			uni.$u.throttle(this.real_save, 1200)
		},
		real_save(){
			
			let url = this.site_url + 'api/auth/member/set_handle';
			let param = {
				email : this.email,
				nickname : this.nickname
			};
			if(this.img_change == 1){
				param.headimg = this.headimg;
			}
			this.areq(url,param,'POST').then(res=>{
				  if(res.code == 1){
					     this.showMsg('保存成功',1500, false, "success")
						uni.$emit('auto_update');
						setTimeout(()=>{
							 this.backTo();  
						},1200)
						
				  }else{
					    this.showMsg(res.msg)
				  }
				
			})
		
		},
		up_img(e) {
			
			uni.showModal({
			    title: '提示',
			    content: '是否修改头像',
			    success:  (rs) => {
			        if (rs.confirm) {
			            console.log('用户点击确定');
						uni.chooseImage({
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album', 'camera'], //从相册选择
							success: res =>{
								let file = res.tempFiles[0];
								let m2 = 2097152;
								if(file.size > m2){
								  this.showMsg('图片大小不能超过2MB',2500);
								  return false;
								}
								let path = res.tempFilePaths[0];//图片选择完成后 获取该图片的路劲
								this.urlTobase64(path).then(res=>{
									 this.img_change = 1;
						             this.headimg = res;
								});
							}
						});
					
			        } else if (rs.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		gotopage(e){
			let url = e.currentTarget.dataset.url;		
			this.$r(url);
		},
		 urlTobase64(url){
		
			var promise = new Promise((resolve, reject) => {
				// #ifdef MP-WEIXIN
				uni.getFileSystemManager().readFile({
					filePath: url, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => { //成功的回调
						//console.log(res);
						let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
						resolve(base64);
					},
					fail: (e) => {
						console.log("图片转换失败");
						reject(0);
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: ress => {
						let base64 = wx.arrayBufferToBase64(ress.data); //把arraybuffer转成base64 
						//	console.log(base64)
						base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦
						resolve(base64);
					},
					fail: (e) => {
						console.log("图片转换失败");
						reject(0);
					}
				})
				// #endif
			});
			return promise;
		},
		backPage() {
			this.backTo();
		},
		
		
	}
};
</script>

<style>
	
	.header{
		background-color: transparent !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #FFE6D0 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.details_box {
		width: 100%;
		margin-top: 4%;
		background-color: #fff;
		padding: 5vw 4%;
		border-radius: 3vw;
	}
	
	.details_boxNo{
		padding: 0vw 4%;
	}
	
	.details_box .details_title {
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		margin-bottom: 5vw;
	}
	
	.details_box .input_box{
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #FC5D20;
		height: 15vw;
	}
	
	.details_box .input_box .m{
		font-size: 4vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		margin-top: 2vw;
	}
	
	.details_box .input_box input{
		font-size: 7vw;
		color: #333;
		flex: 1;
		font-weight: bold;
	}
	
	.details_box .list {
		width: 100%;
		padding: 5vw 0;
		border-bottom: 1px solid #F3F3F3;
		display: flex;
		align-items: center;
		position: relative;
	}
	
	.details_box .list .name {
		font-size: 4.2vw;
		font-weight: bold;
		color: #333;
		margin-right: 4vw;
	}
	
	.details_box .list .text {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	.details_box .list .text .i{
		width: 5vw;
		margin-right: 1vw;
	}
	
	.details_box .list .text .i image{
		width: 100%;
	}
	
	.details_box .list input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 3vw;
		text-align: right;
		font-weight: bold;
	}
	
	.details_box .list .arrow {
		font-size: 3.5vw;
		color: #333;
	}
	
	.details_box .list .yzm {
		font-size: 3.5vw;
		color: #FC5D20;
		font-weight: bold;
		outline: none;
		background-color: transparent !important;
		border-radius: 10vw;
		height: 10vw;
		border: 1px solid #FC5D20;
	}
	
	.standing{
		width: 100%;
	}
	
	.standing image{
		width: 100%;
	}
	
	.standing .text{
		width: 100%;
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		margin-top: 3vw;
		text-align: center;
	}
	
	.details_box .standing:nth-child(2){
		margin-top: 5vw;
	}
	
	.avatar_box{
		width: 30vw;
		height: 30vw;
		border-radius: 50%;
		margin: 10vw auto;
		position: relative;
		background-color: #fff;
		padding: 1vw;
	}
	
	.avatar_box .a01{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.avatar_box .a02{
		width: 8vw;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	
	
	
	
</style>
